<template>
	<view class="p-4">
		<view class="vh-80 flex flex-center flex-column">
			<view class="bg-bg-grey rounded-4 w-80">
				<view class="p-4">
					<view class="border rounded-4 border-dashed p-4" @tap="chooseImage">
						<view class="flex flex-column flex-center py-10 grid-gap-4">
							<image src="@/static/choose-image.png" mode="scaleToFill"
								style="width: 50px;height: 50px;" />
							<text class="h9 text-placeholder">选择图片</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<l-clipper v-if="cropperImage" :image-url="cropperImage" @success="handleCrop" @cancel="cancel"
			:is-show-photo-btn="false" :width="300" :height="600" is-lock-width is-lock-height is-limit-move />
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import { $http, $message } from '../../utils';
const cropperImage = ref('');
let eventName = '';
const handleCrop = (res: any) => {
	uni.showLoading({
		title: '上传中...',
		mask: true
	})
	$http.upload('Generation/upload', {
		filePath: res.url,
		name: 'file'
	}).then((res: any) => {
		uni.hideLoading();
		if (res.code === $http.ResponseCode.SUCCESS) {
			uni.$emit(eventName, res);
			cancel();
		} else {
			$message.error(res.msg);
		}
	}).catch(() => {
		uni.hideLoading();
	})
};
const cancel = () => {
	uni.navigateBack();
};
const chooseImage = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['original'],
		sourceType: ['album'],
		success: (res: any) => {
			cropperImage.value = res.tempFilePaths[0];
		},
		fail: (err: any) => {
			uni.navigateBack();
		}
	})
}
onLoad((options: any) => {
	eventName = options.event;
	chooseImage();
});
</script>

<style lang="scss" scoped></style>
